import { FC } from 'react'
import { Typography, Space, Checkbox } from 'antd'
import PropComponent from './PropComponent'
const { Paragraph } = Typography
export type propsType = {
  title?: string
  isVertical?: boolean
  list?: Array<{ value: string; text: string; checked: boolean }>
  value?: string
  disabled?: boolean
}
const questionCheckobx: FC<propsType> = props => {
  const {
    title,
    isVertical,
    list = [
      { value: '1', text: '选项1', checked: false },
      { value: '2', text: '选项2', checked: false },
      { value: '3', text: '选项3', checked: false },
    ],
  } = props
  return (
    <div>
      <Paragraph strong>{title}</Paragraph>
      <Space direction={isVertical ? 'vertical' : 'horizontal'}>
        {list.map(item => {
          return (
            <Checkbox key={item.value} checked={item.checked} value={item.value}>
              {item.text}
            </Checkbox>
          )
        })}
      </Space>
    </div>
  )
}

export const questionCheckobxConfig = {
  title: '多选',
  type: 'questionCheckobx',
  PropComponent,
  Component: questionCheckobx,
}

export default questionCheckobx
